<!-- 地图组件 -->
<template>
    <div>
        <div class="wrapper" ref="box" id="container"></div>
        <slot></slot>
    </div>
</template>

<script>
import getAmap from "@/api/map.js";
export default {
    data () {
        return {
            map: null,
            infoWindow: null,
            markerList: [],
            AMap: null
        };
    },
    props: {
        positionList: {
            default: []
        },
        addStation: {
            default: () => {

            }
        },
        whetherAdd: {
            default: false
        },
        searchSiteInputId: {
            default: ''
        }
    },
    watch: {
        positionList (positionList) {
            if (!this.AMap) return false
            this.markerList.forEach(marker => {
                this.map.remove(marker)
            })
            this.markerList = []
            positionList.forEach(item => {
                var marker = new this.AMap.Marker({
                    position: [item.lng, item.lat]//位置
                })
                this.markerList.push(marker)
                marker.siteName = item.siteName
                marker.carCount = item.carCount
                marker.userCount = item.userCount
                this.map.add(marker);
                marker.on('click', this.markerClick);
            })
        }
    },
    destroyed () {
        // 销毁地图实例
        this.map && this.map.destroy();
    },
    mounted () {
        getAmap().then(
            AMap => {
                this.AMap = AMap
                var map = this.map = new AMap.Map("container", {
                    zoom: 17, //级别
                    viewMode: "3D", //使用3D视图
                    center: [99.00009, 30.79409],
                    resizeEnable: true,
                    rotateEnable: true,
                    pitchEnable: true,
                });
                AMap.plugin([
                    'AMap.ControlBar',
                    'AMap.Scale'
                ], function () {
                    // 添加 3D 罗盘控制
                    map.addControl(new AMap.ControlBar());
                    map.addControl(new AMap.Scale());
                });
                map.on('complete', () => {
                    //输入提示
                    if (this.searchSiteInputId) {
                        AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], () => {
                            var autoOptions = {
                                // 使用联想输入的input的id
                                input: this.searchSiteInputId
                            }
                            var autocomplete = new AMap.Autocomplete(autoOptions)

                            var placeSearch = new AMap.PlaceSearch({
                                map: map
                            })
                            AMap.event.addListener(autocomplete, 'select', function (e) {
                                placeSearch.search(e.poi.name)
                            })
                        })
                    }

                    this.infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
                    this.positionList.forEach(item => {
                        var marker = new AMap.Marker({
                            position: [item.lng, item.lat]//位置
                        })
                        this.markerList.push(marker)
                        marker.siteName = item.siteName
                        marker.carCount = item.carCount
                        marker.userCount = item.userCount
                        map.add(marker);
                        marker.on('click', this.markerClick);
                    })
                });
                map.on('click', (e) => {
                    if (!this.whetherAdd) return false
                    let lng = e.lnglat.getLng();
                    let lat = e.lnglat.getLat();
                    var marker = new AMap.Marker({
                        position: [lng, lat]//位置
                    })
                    this.addStation(lat, lng)
                })
            },
            err => {
                this.$message.error("地图加载失败");
            }
        ).catch((error) => {
            console.log(error)
        })
    },

    methods: {
        markerClick (e) {
            this.infoWindow.setContent("<div class='mapInfo'><h3 class='map_bt'>" + e.target.siteName + "</h3>" +
                "<h3 class='map_bt'>人数：" + e.target.userCount + "</h3>" +
                "<h3 class='map_bt'>车辆：" + e.target.carCount + "</h3>" +
                "</div>");
            this.infoWindow.open(this.map, e.target.getPosition());
        }
    }
};
</script>
<style lang='scss' scoped>
.wrapper {
    z-index: 2;
}
::v-deep .el-popover {
    left: 40px;
    transform: translateY(-100%);
    margin-top: 40px;
}
</style>

<style>
#container {
    height: 490px;
    position: relative;
    z-index: 2;
}
.mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}
.amap-info-content {
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 12px;
    position: relative;
    background: #fff;
    padding: 10px 18px 10px 10px;
    line-height: 1.4;
    overflow: auto;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.mapInfo {
    width: 150px;
    margin-left: 15px;
}
.map_bt {
    margin-top: 5px;
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #666 !important;
}
.map_bt:first-child {
    font-size: 18px !important;
    margin-bottom: 15px;
    color: #000 !important;
}
.amap-info-close {
    right: 10px !important;
}
</style>